<template>
  <el-scrollbar class="scorllbar">
    <div class="evaluate_people">
      <div
        :class="['p_list', { active: activeUserId === user.userId }]"
        v-for="(user, index) in rollList"
        :key="user.userId"
        @click="peopleChange(user, index)">
        <!-- <div :class="['status', statusClass(user.status)]" v-if="user.status != 3"></div> -->
        <div class="user_heade">
          <el-avatar
            slot="reference"
            class="user-icon"
            :src="user.headUrl"
            size="medium"
            v-if="user.headUrl"></el-avatar>
          <el-avatar
            slot="reference"
            class="user-icon"
            :src="user.gender === '女' ? circleUrlW : circleUrlM"
            size="medium"
            v-else></el-avatar>
        </div>
        <div class="user">
          <div class="user_name">{{ user.userName }}</div>
          <div class="score">
            <template
              v-if="
                (user.assessRank || user.mainLeaderAssessRank || user.leaderAssessRank) &&
                busSign.includes('DEAL_LEADER_ASSESS')
              ">
              {{ assessmentGrade[Number(user.assessRank || user.mainLeaderAssessRank || user.leaderAssessRank) - 1] }}
            </template>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'EvaluatePeople',
  components: {},
  props: {
    rollList: {
      type: Array,
      default: () => [],
    },
    busSign: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      activeUserId: '',
      assessmentGrade: ['好', '较好', '一般', '较差'],
      userList: [],
      queryRouter: {},
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  computed: {
    ...mapGetters('evaluation', ['changeUserID', 'evSelectUserList']),
  },
  filters: {},
  watch: {
    rollList: {
      handler(news) {
        this.setActiveUser()
      },
      deep: true,
    },
    // evSelectUserList: {
    //   handler(now) {
    //     this.userList = now
    //     this.setActiveUser()
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {
    this.queryRouter = this.$route.query
  },
  mounted() {
    this.setActiveUser()
  },
  methods: {
    ...mapMutations('evaluation', ['setChangeUserID']),
    peopleChange({ userId }, index) {
      if (this.activeUserId !== userId) {
        this.setActiveUser(index)
      }
    },
    // 设置选中用户，回传到父组件
    setActiveUser(i) {
      // console.log(i)
      // i:点击切换下标，如果不存的话说明是第一次进入
      if (i === undefined) {
        if (this.changeUserID) {
          this.activeUserId = this.changeUserID
          for (let index = 0; index < this.rollList.length; index++) {
            const element = this.rollList[index]
            if (element.userId === this.changeUserID) {
              this.$emit('setActivePeople', element)
              return
            }
          }
        } else {
          this.activeUserId = this.rollList[0].userId
          this.$emit('setActivePeople', this.rollList[0])
        }
      } else {
        // 点击切换
        this.activeUserId = this.rollList[i].userId
        this.setChangeUserID(this.activeUserId)
        this.$emit('setActivePeople', this.rollList[i])
      }
    },
    statusClass(status) {
      // 2为已评分，1为待评分，0为未小结
      let className = ''
      switch (status * 1) {
        case 1:
          className = 'not_reviewed'
          break
        case 2:
          className = 'reviewed'
          break
        default:
          break
      }
      return className
    },
  },
}
</script>

<style lang="scss" scoped>
.scorllbar {
  height: 100%;
  border-right: solid 1px #dddddd;
  width: 190px;
}
.evaluate_people {
  .p_list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    border-bottom: 1px solid #e4e7ed;
    font-size: 14px;
    cursor: pointer;
    &.active {
      background: #5a96e9;
      color: #ffffff;
    }
    .status {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      &.reviewed {
        background-color: #488c3c;
      }
      &.not_reviewed {
        background-color: #950002;
      }
      &.not_commit {
        background-color: #ccc;
      }
    }
    .icontouxiang6 {
      font-size: 38px;
      margin: 0 10px;
    }
    .user {
      flex: 1;
      .user_name {
        font-size: 14px;
        font-weight: bold;
      }
      .score {
        margin-top: 3px;
      }
    }
    .user_heade {
      margin-right: 20px;
      width: 45px;
      height: 45px;
      /deep/.user-icon {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
